<template>
  <div class="search-container">
    <el-input
      v-model="searchText"
      placeholder="输入 名称、标签"
      class="input-with-select"
      style="width: 300px; float: right"
      clearable
    >
      <template #append>
        <el-button :icon="Search" @click="searchHandle">搜索</el-button>
      </template>
    </el-input>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"
import { Search } from "@element-plus/icons-vue"
import emitter from "@/utils/mitt";
import { ElMessage } from "element-plus";

const searchText = ref<string>()

function searchHandle() {
    if (!searchText.value || searchText.value === "" || /^\s*$/.test(searchText.value!)) {
        ElMessage.warning("搜索框不能为空")
        return
    }
    emitter.emit("DM:search-image-start",{
        data: searchText.value
    })
}

</script>

<style lang="scss" scoped>
.search-container {
  :deep(.el-button) {
    background-color: #409EFF;
    color: white;
    border-radius: 0 5px 5px 0;
  }
  :deep(.el-button:hover) {
    background-color: #66b1ff;
    color: white;
  }
  :deep(.el-button:active) {
    background-color: #3375b9;
    color: white;
  }
}
</style>
